<script>
export default {
  data() {
    return {}
  },
  computed: {
    isLogin() {
      return !!this.$store.user.token
    },
    listModel() {
      return [
        {
          icon: 'person-filled',
          text: '会员信息',
          path: '/personal/memberInfo',
          color: '#3CA0D0',
        },
        {
          icon: 'chatbubble-filled',
          text: '联系我们',
          path: '/pages/contact/index',
          color: '#67E300',
        },
      ]
    },
    userInfo() {
      return this.$store.user.userInfo
    },
  },
  methods: {
    handleInfo(item) {
      this.$Router.push({
        path: item.path,
        query: item.query || {},
      })
    },
    handleLogin() {
      if (this.isLogin) {
        return
      }

      this.$Router.push({
        path: '/login',
      })
    },
    async handleLogout() {
      try {
        await this.$dialog('确定要退出登录吗?', {
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
      }
      catch (error) {
        return
      }

      await this.$store.user.logout()
      await this.$toast('退出登录成功', { type: 'success' })
    },
  },
}
</script>

<template>
  <view class="h-full bg-gray-100">
    <uni-card>
      <view
        class="h-20"
      >
        <u-row>
          <u-col span="3">
            <view class="overflow-hidden rounded-full w-16 h-16" style="border: 1px solid rgb(216, 216, 216);">
              <image :src="userInfo.avatar" alt="" class="w-full h-full" />
            </view>
          </u-col>
          <u-col span="6">
            <view class="text-black font-semibold">
              <view v-if="isLogin" class="text-base">
                {{ userInfo.nickname }}
              </view>
              <view v-else>
                立即登录
              </view>
            </view>
            <view class="w-18 pt-2">
              <view class="text-amber-500">
                {{ userInfo.rankName }}
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
    </uni-card>

    <view class="m-4 rounded-lg overflow-hidden">
      <view
        v-for="(item, index) of listModel"
        :key="index"
        class="flex items-center py-2 px-4 border-b border-gray-200 bg-white"
        @click="handleInfo(item)"
      >
        <view class="w-10 flex-none truncate text-primary-500 text-2xl">
          <uni-icons :type="item.icon" size="28" :color="item.color"></uni-icons>
        </view>
        <view class="flex-1 w-0">
          {{ item.text }}
        </view>
        <view class="flex-none w-10 text-right text-gray-500">
          <uni-icons type="right" size="20" color="gray"></uni-icons>
        </view>
      </view>
    </view>
    <view v-if="isLogin" class="mt-8 px-4">
      <u-button type="error" plain ripple @click="handleLogout">
        退出登录
      </u-button>
    </view>
  </view>
</template>
